<template>
  <div class="product-listing">
    <h1>农产品上架页面</h1>
    <van-button type="primary" @click="goBack" style="margin-bottom: 16px;">返回</van-button>
    <!-- 农产品上架表单 -->
    <form>
      <label>商品名称：</label>
      <input 
        type="text" 
        v-model="productName" 
        placeholder="请输入商品名称"
      >
      <button 
        type="submit" 
        @click.prevent="handleSubmit"
      >上架农产品</button>
    </form>
    <div v-if="productListings.length > 0">
      <h2>未上架农产品记录</h2>
      <ul>
        <li 
          v-for="item in productListings.filter(item =>!item.is_listed)" 
          :key="item.id"
        >
          <span class="product-id">商品 ID: {{ item.product_id || '无' }}</span> - 
          <span class="product-name">{{ item.name || '无商品名称' }}</span> - 
          <span class="product-status" :class="{ 'unlisted': true }">未上架</span>
        </li>
      </ul>
      <h2>已上架农产品记录</h2>
      <ul>
        <li 
          v-for="item in productListings.filter(item => item.is_listed)" 
          :key="item.id"
        >
          <span class="product-id">商品 ID: {{ item.product_id || '无' }}</span> - 
          <span class="product-name">{{ item.name || '无商品名称' }}</span> - 
          <span class="product-status" :class="{ 'unlisted':!item.is_listed }">已上架</span>
        </li>
      </ul>
    </div>
    <div v-else>
      <p>暂无上架记录</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { showToast } from 'vant'
import { getUserInfo } from '@/api/user' 
import { getByFarmerId } from '@/api/farmerProductList'
import { getProductById } from '@/api/product'
import { createFarmerProductList } from '@/api/farmerProductList'
import { useRouter } from 'vue-router'

const router = useRouter()
const farmerId = ref('') 
const productListings = ref([]) 
const productName = ref('') 
let userRes; 

const goBack = () => {
  router.back()
}

onMounted(async () => {
  try {
    userRes = await getUserInfo()
    if (userRes.data) {
      farmerId.value = userRes.data.id
      const res = await getByFarmerId(farmerId.value)
      productListings.value = res
      const productDetails = []
      for (const item of productListings.value) {
        if (item.product_id) {
          const productRes = await getProductById(item.product_id)
          productDetails.push({ ...item, ...productRes })
        } else {
          productDetails.push({ ...item})
        }
      }
      productListings.value = productDetails;
    } else {
      showToast('获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息或上架记录失败:', error)
    showToast('获取用户信息或上架记录失败')
  }
})

const handleSubmit = async () => {
  try {
    await createFarmerProductList({
      farmer_id: farmerId.value,
      village_id: userRes.data.village_id,
      is_listed: 0,
      name: productName.value
    })
    showToast('上架申请提交成功')
    const res = await getByFarmerId(farmerId.value)
    productListings.value = res
    const productDetails = []
    for (const item of productListings.value) {
      if (item.product_id) {
        const productRes = await getProductById(item.product_id)
        productDetails.push({ ...item, ...productRes })
      } else {
        productDetails.push({ ...item})
      }
    }
    productListings.value = productDetails
  } catch (error) {
    console.error('上架失败:', error)
    showToast('上架失败')
  }
}
</script>

<style lang="scss" scoped>
.product-listing {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.product-listing h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 20px;
}

.product-listing ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.product-listing ul li {
  padding: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.product-listing ul li:last-child {
  border-bottom: none;
}

.product-id {
  color: #666;
}

.product-name {
  font-weight: bold;
  flex: 1;
}

.product-status {
  color: #4fc08d; /* 已上架颜色 */
}

.product-status.unlisted {
  color: #999; /* 未上架颜色 */
}

.product-listing form {
  margin-bottom: 20px;
}

.product-listing form label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 16px;
}

.product-listing form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

.product-listing form button {
  padding: 12px 24px;
  background-color: #4fc08d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
  width: 100%;
}

.product-listing form button:hover {
  background-color: #42b983;
}
</style>